import {messages} from "share/common";
import React from 'react'
import 'styles/common-functions-menu/common-functions-menu.scss';
import {ListSort} from 'components/index';
import {Icon, Tooltip} from 'antd';

/*
* 常用功能编辑状态 的 组件
*
* */

class CommonFunctionsMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sortedKeysArray: [],
    };
  }

  componentWillMount(){
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  addMoveFuncItem = (e, item) => {
    e.stopPropagation();
    this.props.addMoveFuncItem(item);
  };

  goToPage = (e, item) => {
    e.stopPropagation();
    this.props.goToPage(item);
  };

  onChange = (resultDom) => {
    let result = [];
    result = resultDom.map(item => item.key)
    this.setState({
      sortedKeysArray: result
    });
    this.props.onDraged(result);
  };

  render() {
    const { subMenuTree } = this.props.subMenu;
    const { isEditCommonFunctions, selectedKeys, EnglishEnv } = this.props;
    let sKey = selectedKeys[0];
    const LongNameList = ['process-monitoring-platform', 'loan-and-refund', 'sub-application-view',
      'callback-setting', 'invoice-source-check', 'reimb-submission-control',
      'loan-max', 'currency-setting', 'audit-opinion', 'tax-code', 'auto-audit',
      'email-notification', 'notification-setting', 'airline-platform', 'pay-backlash-recheck'];

    return (
      <div className={isEditCommonFunctions ? 'common-functions-menu' : 'common-functions-menu none'}>
        <ListSort onChange={this.onChange} dragClassName={'on-drag'}>
          {subMenuTree.map((item, index) => <div key={item.key} className={item.key === sKey ? "single-menu active" : "single-menu"}>
            <div className="menu-box" key={item.key}>
              <div className={`drag-icon  ${EnglishEnv ? 'en' : ''}`}>
                <svg className="icon" viewBox="0 0 1024 1024"
                     width="200" height="200">
                  <path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zM904 784H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zM904 472H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"/>
                </svg>
              </div>
              <div className={`menu-name ${EnglishEnv ? 'en' : ''}`} onMouseDown={(e) => {
                e.stopPropagation();
                e.preventDefault();
                this.goToPage(e, item)
              }}>{
                EnglishEnv && (LongNameList.indexOf(item.key) !== -1) ?
                  <Tooltip title={item.resourceName}><span className="span-title">{item.resourceName}</span></Tooltip> :
                  <span className="span-title">{item.resourceName}</span>
              }</div>
              <div className={`delete-icon  ${EnglishEnv ? 'en' : ''}`} onMouseDown={(e) => {
                e.stopPropagation();
                e.preventDefault();
                this.addMoveFuncItem(e, item)
              }}><Tooltip placement="right" title={messages('common.delete')/*删除*/}><Icon type='delete' /></Tooltip></div>
            </div>
          </div>)}
        </ListSort>
      </div>
    )
  }

}

export default CommonFunctionsMenu
